.modal{
    @include position(fixed);
    z-index: 10;
    transition: all .5s;
    .mask{
        @include position(fixed);
        background-color:$colorI ;
        opacity:0.5;
    }
    
    &.slide-enter-active{
        top:0;
    }
    &.slide-leave-active{
        top:-100%;
    }
    &.slide-enter{
        top:-100%;
    }
    .modal-dialog{
        @include position(absolute,40%,50%,660px,auto);
        background-color: $colorG;
        margin-left:330px;
        // transform:translate(-50%,-50%);
        .modal-header{
            height:60px;
            background-color: $colorJ;
            padding:0 25px;
            line-height: 60px;
            font-size:$fontI;
            .icon-close{
              @include positionImg(absolute,23px,25px,14px,14px,'/img/icon-close.png');
              transition: transform .3s;
              &:hover{
                transform: scale(1.5);
              }
            }
          }
        .modal-body{
            padding:42px 40px 54px;
            font-size:14px;
        }
        .modal-footer{
            height:82px;
            line-height: 82px;
            text-align: center;
            background: &colorJ;
        }
    }
}